import PermissionLink from '@/components/PermissionLink'
import { RESERVE_INVOICE_STATUS_TEXT } from '@/constant/purchase'
import { MonitorOutlined, ThunderboltOutlined, TruckOutlined } from '@ant-design/icons'
import { Badge, Dropdown, Image, Popconfirm, Space, TableColumnsType, Tooltip, Typography } from 'antd'
import { TransportationOrderVO as ITableData } from './types'
import { LogisticsDemandStatusMap } from '@/constant/index'
const BadgeStatusMap: { [k: number | string]: 'default' | 'warning' | 'success' | 'error' | 'processing' | undefined } =
  {
    0: 'warning',
    1: 'processing',
    2: 'default',
  }
export const useIndexColumns = ({
  onEdit,
  onEditBoxQty,
  onViewLogs,
  getTransportInfo,
  changeStatus,
  FlashEditBoxQty,
}: {
  onEdit: (info: ITableData) => void
  onEditBoxQty: (info: ITableData) => void
  onViewLogs: (rows: ITableData) => void
  getTransportInfo: (rows: ITableData) => void
  changeStatus: (rows: ITableData, type: 1 | 2 | 3) => void
  FlashEditBoxQty: boolean
}): TableColumnsType<ITableData> => [
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    width: 250,
    fixed: 'left',
    render: (_, rows) => {
      return (
        <Space size="small">
          {rows?.transportStatus == 0 && (
            <PermissionLink onClick={() => changeStatus(rows, 1)} permission="LogisticsReservation">
              预约
            </PermissionLink>
          )}
          {rows?.transportStatus == 1 && (
            <Popconfirm
              title={`确认要预约吗？`}
              onConfirm={() => changeStatus(rows, 2)}
              okText="确认"
              cancelText="取消"
            >
              <PermissionLink permission="LogisticsReservationCancel">取消预约</PermissionLink>
            </Popconfirm>
          )}
          {rows?.transportStatus == 0 && (
            <Popconfirm
              title={`确认要预约吗？`}
              onConfirm={() => changeStatus(rows, 3)}
              okText="确认"
              cancelText="取消"
            >
              <PermissionLink permission="LogisticsReservationDelete" type="danger">
                作废
              </PermissionLink>
            </Popconfirm>
          )}
          <PermissionLink permission="LogisticsReservationViewLogs" onClick={() => onViewLogs(rows)}>
            查看日志
          </PermissionLink>
        </Space>
      )
    },
  },
  {
    title: '物流需求单号',
    dataIndex: 'transportationOrderCode',
    key: 'transportationOrderCode',
    align: 'center',
    fixed: 'left',
    width: 140,
    render: (info, rows) => {
      return <Typography.Link onClick={() => onEdit(rows)}>{info || '-'}</Typography.Link>
    },
  },
  {
    title: '物流需求单状态',
    dataIndex: 'transportStatus',
    key: 'transportStatus',
    align: 'center',
    width: 140,
    render: (info) => {
      return info >= 0 ? <Badge status={BadgeStatusMap[info]} text={LogisticsDemandStatusMap[info] || '-'} /> : '-'
    },
  },
  {
    title: '运单号',
    dataIndex: 'wayBillNo',
    key: 'wayBillNo',
    align: 'center',
    width: 200,
    render: (info, rows) => {
      return (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span>{info || '-'}</span>
          {rows?.wayBillNo && (
            <span
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}
              onClick={() => getTransportInfo(rows)}
            >
              状态：{rows?.wayBillStatus || '-'}
              <TruckOutlined style={{ color: 'var(--primary-color)', cursor: 'pointer', fontSize: 20 }} />
            </span>
          )}
        </div>
      )
    },
  },
  {
    title: '物流需求方',
    dataIndex: 'orderSupplierName',
    key: 'orderSupplierName',
    align: 'center',
    width: 140,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip title={info}>
          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{info || '-'}</div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '承运商',
    dataIndex: 'transportSupplierName',
    key: 'transportSupplierName',
    align: 'center',
    width: 100,
    render: (info) => info || '-',
  },
  {
    title: '箱包数',
    dataIndex: 'boxQty',
    key: 'boxQty',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      const expectBoxQty =
        rows?.reserveInvoiceVOList?.reduce(
          (pre: number, current: any) => pre + (Number(current?.totalBoxQty) || 0),
          0,
        ) || 0
      const isCommon = rows.boxQty == expectBoxQty
      return (
        <span style={{ color: isCommon ? '' : 'red' }}>
          {!isCommon ? (
            <span style={{ marginLeft: 4, cursor: 'pointer' }}>
              <Tooltip
                title={
                  <div>
                    <div>箱包数发生变化！如需变更箱包数，请及时重新预约或线下通知物流商！</div>
                    <span style={{ fontWeight: 800 }}>
                      已下发：{info}箱，实际：{expectBoxQty}箱
                    </span>
                  </div>
                }
              >
                {info || '-'}
              </Tooltip>
            </span>
          ) : (
            info || '-'
          )}
          {!isCommon && FlashEditBoxQty && rows.transportStatus == 0 && (
            <Tooltip placement="top" title={`一键修改为参考值，参考值：${expectBoxQty}箱`}>
              <ThunderboltOutlined
                style={{
                  color: 'var(--primary-color)',
                  cursor: 'pointer',
                  marginLeft: 4,
                }}
                onClick={() => onEditBoxQty(rows)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '方数(m³)',
    dataIndex: 'volume',
    key: 'volume',
    align: 'center',
    width: 110,
    render: (info) => info || '-',
  },
  {
    title: '重量(kg)',
    dataIndex: 'weight',
    key: 'weight',
    align: 'center',
    width: 100,
    render: (info) => info || '-',
  },
  {
    title: '预计提货时间',
    dataIndex: 'dispatchTime',
    key: 'dispatchTime',
    align: 'center',
    width: 180,
    render: (info) => info || '-',
  },
  {
    title: '预计送货时间',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    align: 'center',
    width: 180,
    render: (info) => info || '-',
  },
  {
    title: '物流备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip title={info}>
          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{info || '-'}</div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '预约发货单',
    dataIndex: 'reserveInvoiceVOList',
    key: 'reserveInvoiceVOList',
    align: 'center',
    width: 280,
    render: (_, rows) => {
      return (
        rows?.reserveInvoiceVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item.reserveInvoiceCode}>
              {item.reserveInvoiceCode || '-'}
              {item.reserveInvoiceStatus ? '（' + RESERVE_INVOICE_STATUS_TEXT[item.reserveInvoiceStatus] + '）' : null}
            </div>
          )
        }) || '-'
      )
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return (
        rows?.reserveInvoiceVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item.reserveInvoiceCode}>
              {item.spuCode || '-'}
            </div>
          )
        }) || '-'
      )
    },
  },
  {
    title: '款式名称',
    dataIndex: 'spuName',
    key: 'spuName',
    align: 'center',
    width: 220,
    render: (_, rows) => {
      return (
        rows?.reserveInvoiceVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item?.reserveInvoiceCode}>
              <Tooltip title={item?.spuName || '-'}>
                <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {item?.spuName || '-'}
                </div>
              </Tooltip>
            </div>
          )
        }) || '-'
      )
    },
  },
  {
    title: '箱数',
    dataIndex: 'totalBoxQty',
    key: 'totalBoxQty',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return (
        rows?.reserveInvoiceVOList?.map((item) => {
          return (
            <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item.reserveInvoiceCode}>
              {item.totalBoxQty || '-'}
            </div>
          )
        }) || '-'
      )
    },
  },
]
